﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>WebClient for http server</title>
</head>
<body>
<p>
<input type="text" id="textId"/>  id  </p>
<p>
<input type="text" id="textFName"/> Fname  </p>
    <p>
<input type="text" id="textLName"/> Lname  </p>
<p>
<input type="text" id="textAge"/> age  </p>

&nbsp;<br>
<br>

<div>
<input type="button" value="CREATE" onclick="javascript: CREATE();">
<input type="button" value="READ" onclick="javascript: READ();">
<input type="button" value="UPDATE" onclick="javascript: UPDATE();">
<input type="button" value="DELETE" onclick="javascript: DELETE();">
<input type="button" value="CLEAR"  onclick="javascript: CLEAR();">
</div>

<div>
<table id="table1" title="Person Data" border="3">
<tr>
<td> id </td><td> FName </td><td> LName </td><td> Age </td>
</tr>
</table>
</div>

<script language="JavaScript" type="text/javascript">
var rowCount = 0; // the last tableRow number, "0" - for tableHeader

function httpGet(msg) {
try {

    var req = new TCPSocket('127.0.0.1', 8060);
    req.send(msg);
} catch (e) {
    alert('NOT SEND:' + e.Message);
}
   }

    
    function add_row() {
        out = document.getElementById('table1');
        rowCount = out.rows.length;
        row = out.insertRow(rowCount);
        row.insertCell(0).innerHTML = "";
        row.insertCell(1).innerHTML = "";
        row.insertCell(2).innerHTML = "";
        row.insertCell(3).innerHTML = "";
        return false;
    }

    function CREATE() {
        var task = textFName.value + ';' + textLName.value + ';' + textAge.value;
        var result = httpGet('CREATE;' + task + '\n');
        if (result == 'success') {
            READ();
//            add_row();
//            row = document.getElementById('table1').rows.item(rowCount);
//            cell = row.cells.item(0);
//            cell.innerHTML = textId.value;
//            cell = row.cells.item(1);
//            cell.innerHTML = textName.value;
//            cell = row.cells.item(2);
//            cell.innerHTML = textAge.value;
//            cell = row.cells.item(3);
//            cell.innerHTML = selectSex.value;
        }
        else {
            alert('fail');
        }
    }
    function READ() {
        var result = httpGet('READ;\n')
     //clear table
        rowCount = 0;
        for (var idx = 1; idx < document.getElementById('table1').rows.length; ) {
            document.getElementById('table1').deleteRow(idx);
        }
     //clear table
        var spl = result.split('\n');
        for (x = 0; x < spl.length; x++) {
            if (spl[x] == '') { continue; }
            var data = spl[x].split(';');
            add_row();

            row = document.getElementById('table1').rows.item(rowCount);
            cell = row.cells.item(0);
            cell.innerHTML = data[0];
            cell = row.cells.item(1);
            cell.innerHTML = data[1];
            cell = row.cells.item(2);
            cell.innerHTML = data[2];
            cell = row.cells.item(3);
            cell.innerHTML = data[3];
        }
    }

    function UPDATE() {
        var id = textId.value;
        var task = textFName.value + ';' + textLName.value + ';' + textAge.value;
        var result = httpGet('UPDATE;' + id + ';' + task + '\n');
        if (result == 'fail') {
            alert('fail');
        }
        else {
            READ();
        }
    }

    function DELETE() {
        var id = textId.value;
        var result = httpGet('DELETE;' + id + '\n');
        if (result == 'fail') {
            alert('fail');
        }
        else {
            READ();
        }
        return false;
    }

    function CLEAR() {
        var result = httpGet('CLEAR;');
        if (result == 'fail') {
            alert('fail');
            return;
        }
        rowCount = 0;
        for (var idx = 1; idx < document.getElementById('table1').rows.length;) {
            document.getElementById('table1').deleteRow(idx);
        }    
        return false;
    }
    
</script> 

</body>
</html>
